﻿@model ChartModel
@{
    ViewBag.Title = "Chart";
}

<script src="~/Scripts/jChartFX/jchartfx.system.js"></script>
<script src="~/Scripts/jChartFX/jchartfx.coreVector.js"></script>
<h2>Stat: @Model.StatName</h2>
<div id="chart-options">@Html.CreateCheckboxes(Model.Hits.First())</div>
<div id="ChartDiv" style="width:800px;height:400px;display:inline-block"></div>
<script type="text/javascript">
    
    var chart;
    $(document).ready(function ($) {
        chart = new cfx.Chart();
        chart.getData().setSeries(@Model.NumberOfSeries);
        chart.getAxisY().getDataFormat().setFormat(cfx.AxisFormat.Number)
        
        @Html.SetSeries(Model.NumberOfSeries)
        @Html.SetGallery(Model.NumberOfSeries)

        var data = [@Html.DataToChart(Model)];
        chart.setDataSource(data);
        var divHolder = document.getElementById('ChartDiv');
        chart.create(divHolder);
    });
    function swap(pointId, checkboxId) {
        checkboxId.checked ? chart.getSeries().getItem(pointId - 1).setVisible(true) : chart.getSeries().getItem(pointId - 1).setVisible(false);;
    }
    
</script>
<!--
chart = new cfx.Chart();
        chart.getData().setSeries(2);
        chart.getAxisY().setMin(0);
        chart.getAxisY().setMax(25);
        var series1 = chart.getSeries().getItem(0);
        var series2 = chart.getSeries().getItem(1);
        series1.setGallery(cfx.Gallery.Bar);
        series2.setGallery(cfx.Gallery.Bar);

        var data = [];
        chart.setDataSource(data);
        var divHolder = document.getElementById('ChartDiv');
        chart.create(divHolder);

        chart.getAxisY().setMin(0);
        chart.getAxisY().setMax(@Model.Max);
-->